<template>
  <div class="FetchList">
    <div :class="{'fill-height': fillHeight}" :style="{minHeight: height}">
      <slot></slot>
      <div v-if="loading" class="tips">加载中...</div>
      <Empty v-if="!list.length && !loading && !failed" />
      <div class="tips" v-if="list.length && finished && !loading && showNoMore">无更多内容~</div>
      <div class="btn" v-if="list.length && !finished && !loading && isFetchByBtn" @click="handleLoad">
        查看更多
        <i class="iconfont iconright" style="color: #999;"></i>
      </div>
      <div class="btn failed" v-if="failed" @click="handleRefresh">
        重新加载
      </div>
    </div>
  </div>
</template>

<script>
import Empty from './Empty'
export default {
  components: {
    Empty,
  },
  props: {
    api: {
      type: Function,
      required: true,
    },
    params: {
      type: Object,
      default () {
        return {}
      },
    },
    isStopLoad: {
      type: Boolean,
      required: true,
    },
    activeNav: {
      type: String,
      default: '',
    },
    reachBottomTime: {
      type: String,
      default: '',
    },
    pullDownRefreshTime: {
      type: String,
      default: '',
    },
    coverRefreshTime: {
      type: String,
      default: '',
    },
    fillHeight: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: '',
    },
    isFetchByBtn: {
      type: Boolean,
      default: false,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    showNoMore: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      pageParmas: {
        pageSize: this.pageSize,
        pageNo: 1,
      },
      list: [],
      loading: !false,
      finished: false,
      isFocusRefresh: false,
      failed: false,
    }
  },
  watch: {
    activeNav () {
      this.handleRefresh()
    },
    reachBottomTime () {
      this.handleLoad()
    },
    pullDownRefreshTime () {
      this.handleRefresh()
    },
    coverRefreshTime () {
      this.handleRefresh({
        isCover: true,
      })
    },
  },
  mounted () {
    this.handleLoad()
  },
  methods: {
    $focusRefresh () {
      this.handleRefresh()
      this.isFocusRefresh = false
    },
    async handleLoad (config = {}) {
      if (this.isStopLoad && !this.isFocusRefresh) {
        return
      }
      if (this.finished && !config.isCover) {
        return
      }
      if (!config.isCover) {
        this.loading = true
      }
      try {
        const { result } = await this.api(Object.assign({}, this.pageParmas, this.params))
        if (config.isCover) {
          this.list = result.data
        } else {
          this.list = [...this.list, ...result.data]
        }
        this.$emit('change', this.list)

        this.pageParmas.pageNo++
        if (this.list.length >= parseInt(result.totalCount, 10)) {
          this.finished = true
        }
      } catch (e) {
        this.failed = true
      } finally {
        this.loading = false
        uni.hideNavigationBarLoading()
        uni.stopPullDownRefresh()
      }
    },
    handleRefresh (config = {}) {
      this.failed = false
      if (!this.isStopLoad) {
        if (!config.isCover) {
          this.list = []
        }
        this.$emit('change', this.list)
        this.finished = false
        this.pageParmas.pageNo = 1
        this.handleLoad(config)
      }
    },
  },
}
</script>

<style lang="scss" scoped> @import "~css/var.scss";

.FetchList {
	overflow: hidden;

	.fill-height {
		min-height: calc(100vh - 52px);
		background: #f4f2f3;
	}

	.tips {
		padding: 10px 0;
		text-align: center;
		font-size: $fz-m;
		color: #999;
		background: #f4f2f3;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 45px;
		border-top: 1px solid #f0f0f0;
		line-height: 45px;
		color: #999;
		background: #fff;

		&.failed {
			margin: 0 30px;
			margin-top: 20px;
		}
	}
}
</style>
